@import '../../../component/title/title.scss';

.student{
    .student-main-list{
        padding-top: 20px;
        padding-bottom: 40px;
        text-align: center;
        li{
            position: relative;
            display: inline-block;;
            margin: 0 30px;
            cursor: pointer;
            &:before{
                position: absolute;
                top: -24px;
                left: 21px;
                font-size: 30px;
                color: #a13ddd;
            }
            &:nth-of-type(2):before{
                color: $blue;
            }
            &:nth-of-type(2):before{
                color: $orange;
            }
            &:nth-of-type(3):before{
                color: $yellow;
            }
            &:nth-of-type(4):before{
                color: $green;
            }
            img{
                width: 56px;
                height: 56px;
                border-radius: 50%;
            }
            p:nth-of-type(1){
                color: $l-word;
                font-size: 14px;
                margin-top: 6px;
                margin-bottom: 4px;
            }
            p:nth-of-type(2){
                color: $s-word;
                font-size: 12px;
            }
        }
    }
    .student-list{
        text-align: center;
        li{
            position: relative;
            display: inline-block;
            margin: 15px 18px;
            img{
                &:hover{
                    border: 2px solid $blue;
                }
                &:hover + div{
                    display: block;
                }
                transition: 0.3s;
                cursor: pointer;
                width: 48px;
                height: 48px;
                border: 2px solid transparent;
                border-radius: 50%;
                padding: 1px;
            }
            .info{
                display: none;
                position: absolute;
                bottom: 66px;
                left: -80px;
                width: 202px;
                min-height: 76px;
                box-sizing: border-box;
                background-color: $blue;
                color: white;
                padding: 18px 24px;
                border-radius: 10px;
                transition: 0.3s;
                &:after{
                    position: absolute;
                    left: 50%;
                    top: 100%;
                    margin-left: -5px;
                    content: '';
                    width: 0px;
                    height: 0px;
                    border: 10px solid transparent;
                    border-top: 10px solid $blue;
                }
                p:nth-of-type(1){
                    margin-bottom: 8px;
                }
                p:nth-of-type(2){
                    font-size: 12px;
                    line-height: 1.4;
                }
            }
            &:nth-of-type(2n){
                .info{
                    background-color: $orange;
                    &:after{
                        border-top: 10px solid $orange;
                    }
                }
                img:hover{
                    border: 2px solid $orange;
                }
            }
            &:nth-of-type(3n){
                .info{
                    background-color: $yellow;
                    &:after{
                        border-top: 10px solid $yellow;
                    }
                }
                img:hover{
                    border: 2px solid $yellow;
                }
            }
            &:nth-of-type(4n){
                .info{
                    background-color: $red;
                    &:after{
                        border-top: 10px solid $red;
                    }
                }
                img:hover{
                    border: 2px solid $red;
                }
            }
        }
    }
}